<template>
	<view>
		
		<!-- 内容 -->
		<view class="combodybj">
			<view class="con_input bgdfff">
				<view class="input" :id="[float1?'active':'']">
					<view class="font32 left">持卡人</view>
					<input class="uni-input font32" type="text" placeholder="请输入持卡人姓名" placeholder-class="place" @focus="change1" focus=true v-model="name"/>
				</view>
			</view>
			
			<view class="con_input bgdfff">
				<view class="input" :id="[float2?'active':'']">
					<view class="font32 left">账号</view>
					<input class="uni-input font32" type="text" placeholder="请输入持卡人卡号"  placeholder-class="place" @focus="change2" v-model="number"/>
				</view>
			
			</view>
			
			<view class="con_input bgdfff">
				<view class="input" :id="[float3?'active':'']">
					<view class="font32 left">银行名称</view>
					<input class="uni-input font32" type="text" placeholder="请输入银行名称"  placeholder-class="place" @focus="change3" v-model="cardName"/>
				</view>
			
			
				<!-- 选框 -->
				<view class="radio bgdfff">
					<view class="font32">是否设为默认</view>
					<view class="right">
						<radio-group @change="radioChange">
							<label>
								 <view>
									<radio value="1"/>是
								</view>
								<view>
									<radio value="0" checked="true"/>否
								</view>
							</label>
						</radio-group>
					</view>
				</view>
			</view>	
				
				
				
			
			<button class="colorfff sysbj font34 btn_sub" @click="sub_btn">绑定</button>
		</view>
		
		
		
	</view>
</template>

<script>
	import uniIcon from '../../../components/uni-icon/uni-icon.vue' //图标
	export default {
		data() {
			return {
				float1:true,
				float2:false,
				float3:false,
				imgurl:"../../static/myimg/add_pic.png",
				choseimg:'',
				name:"",
				number:"",
				is_default:'',
				cardName:''
			};
		},
		components:{
			uniIcon
		},
		methods:{
			 reback(){ //返回
				uni.navigateBack({
					delta:1
				})
			},
			change1(){
				this.float1=true;
				this.float2=false;
				this.float3=false
			},
			change2(){
				this.float1=false;
				this.float2=true;
				this.float3=false
			},
			change3(){
				this.float1=false;
				this.float2=false;
				this.float3=true
			},
			// 选框
			radioChange(evt){
				console.log(evt.detail.value)
				this.is_default=evt.detail.value
			},
			// 上传图片
			upload(){
				var that=this
				uni.chooseImage({
					count:1,//图片数量
					sizeType:['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (res) => {
						that.choseimg=res.tempFilePaths;
						that.imgurl=res.tempFilePaths[0]
					}
				})
			},
			//绑定
			sub_btn(){
				console.log(this.name);
				// 姓名正则
				var reg_name= /^(([a-zA-Z+\.?\·?a-zA-Z+]{2,30}$)||([\u4e00-\u9fa5+\·?\u4e00-\u9fa5+]{2,30}$))/;
				//银行卡正则
				var card = /^([1-9]{1})(\d{14}|\d{18})$/
				if(this.name==''){
					uni.showToast({
						title: '请输入姓名',
						icon: "none",
						duration: 1500
					});
				}else if(!reg_name.test(this.name)){
					uni.showToast({
						title: '姓名输入有误 ，请重新输入',
						icon: "none",
						duration: 1500
					});
				}else if(this.number==''){
					uni.showToast({
						title: '请输入卡号',
						icon: "none",
						duration: 1500
					});
				}else if(!card.test(this.number)){
					uni.showToast({
						title: '请输入正确的卡号',
						icon: "none",
						duration: 1500
					});
				}else if(this.cardName==''){
					uni.showToast({
						title: '请输入银行卡名称',
						icon: "none",
						duration: 1500
					});
				}else{
				
			
				uni.uploadFile({
					url:this.$HttpHead+'user/add_user_bank',
					filePath:this.imgurl,
					name:'file',
					formData:{
						"uid":uni.getStorageSync('udata').uid,
						"token":uni.getStorageSync('udata').token,
						'type':'1',
						'user_name':this.name,
						'bank_name':this.cardName,
						'bank_number':this.number,
						'is_default':this.is_default
					
					},
					success: (res) => {
						console.log(res)
						if(res.errMsg=='uploadFile:ok'){
							uni.showToast({
								title: '绑定成功',
								icon: "none",
								mask: true,
								duration: 2000
							});
							setTimeout(()=>{
								uni.navigateTo({
									url:'./card'
								})
							},1500)
							
						}else{
							if(res.errMsg=="token验证失败"){
									uni.showToast({
										title: '您的账号在另一台设备正在登录',
										icon: "none",
										duration: 1500
									});
									setTimeout(function(){
										uni.reLaunch({
							                  url: '../login/login'
							             });
									},2000)
								}else{
									uni.showToast({
										title: res.errMsg,
										icon: "none",
										duration: 1500
									});
								}
						}
					}
					
				})
			}
				
				
			}
			
		
		
		
		}
	}
</script>

<style lang="less">

	// 输入内容
	.input{
		display: flex;
		align-items: center;
		padding: 25upx 0 ;
		border-bottom: 1px solid #cdced0;
		view{width:18vw}
		input{
			width: 70vw;
		}
	}
	.con_input{
		padding: 0 15upx;
		overflow: hidden;
	}
	#active{
		border-bottom: 1px solid #ea9d29;
	}
	
	// 选框
	.radio{
		display: flex;
		justify-content:space-between;
		padding-right: 200upx;
		margin: 50upx 0;
	}
	.right label{
		width:35vw;
		display: flex;
		justify-content: space-between;
	}
	// 绑定
	.btn_sub{
		
		width: 80vw;
		margin: 80upx auto;
	}
</style>
